import { memo, useEffect, useMemo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Simulate } from 'react-dom/test-utils';
import {Button, Form, Input, message, Spin} from 'antd';
import { Select } from 'antd/es';
import {
  resAccount,
  resAddAccount,
  resChangeAccount,
  resDeleteAccount,
} from '@/services/account';
import { useRequest } from 'ahooks';
import {
  labelCol,
  validateMessage,
  wrapperCol,
} from '@/components/AddressFormModal';
import ProfileContainer from '@/components/ProfileContainer';

const AccountPage: FC<PropsWithChildren<{}>> = () => {
  const { data, loading } = useRequest(resAccount);
  const { runAsync: addAccount, loading: addLoading } = useRequest(
    resAddAccount,
    { manual: true }
  );
  const { runAsync: changeAccount, loading: changeLoading } = useRequest(
    resChangeAccount,
    { manual: true }
  );
  const { runAsync: deleteAccount, loading: deleteLoading } = useRequest(
    resDeleteAccount,
    {
      manual: true,
    }
  );
  const onFinish = (value: API.AccountParams) => {
    if (data?.id && data.id > 0) {
      changeAccount(data?.id, value).then(() => {
        message.success('设置收款账号成功');
      });
    } else {
      addAccount(value).then(() => {
        message.success('添加收款账号成功');
      });
    }
  };


  return (
    <ProfileContainer title={'收款账号'}>
      <div className={'w-[350px] mt-20 mx-auto'}>
        <Spin spinning={loading} />
        {data && (
          <Form
            initialValues={data}
            onFinish={onFinish}
            validateMessages={validateMessage}
            labelCol={labelCol}
            wrapperCol={wrapperCol}
          >
            <Form.Item
              label="账号类型"
              name="account_type"
              rules={[{ required: true }]}
            >
              <Select>
                <Select.Option value={'支付宝'}>支付宝</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="开户名"
              name="account_name"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
            <Form.Item label="账号" name="account" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
            <Button
              block
              type={'primary'}
              loading={addLoading || changeLoading}
              htmlType={'submit'}
            >
              保存
            </Button>
          </Form>
        )}
      </div>
    </ProfileContainer>
  );
};

export default memo(AccountPage);
